<template>
    <div class="main-container">
        <ad-left v-if='$store.state.isPc'></ad-left>
        <div class="main">
            <template v-if='!$store.state.isPc'>
                <ul class="f-s main-tab">
                    <li class="active">法币交易</li>
                    <li>礼品卡交易</li>
                </ul>
                <div class="sale-or-buy center">
                    <el-button type='primary'>购买</el-button>
                    <el-button>出售</el-button>
                </div>
            </template>
            <header>
                <el-select v-model="activeName" placeholder="选择币种">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                </el-select>
                <el-select v-model="activeName" placeholder="选择币种">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                </el-select>
                <el-select v-model="activeName" placeholder="选择币种">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                </el-select>
                <el-select v-model="activeName" placeholder="选择币种">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                </el-select>
            </header>
            <el-table 
                :data='table'
                v-if='$store.state.isPc'
                style='width : 1200px; margin: 0 auto;'>
                <el-table-column label='昵称' prop='one' width="320">
                    <template slot-scope="scope">
                        <div class="saler-info f-s">
                            <img :src="require('@ast/imgs/1.png')" alt="">
                            <div>
                                <h1>
                                    昵称<span>认证信息</span>
                                </h1>
                                <p>
                                    <span>交易13</span>
                                    <span>好评 100%</span>
                                </p>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label='付款方式' prop='two'></el-table-column>
                <el-table-column label='限额' prop='three' ></el-table-column>
                <el-table-column label='折扣' prop='three' ></el-table-column>
                <el-table-column label='价格' prop='four'></el-table-column>
                <el-table-column label='交易' prop='five' width='120'>
                    <template slot-scope="scope">
                        <el-button type='primary'>购买BTC</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 移动端列表 -->
            <ul class="list" v-else>
                <li class="s-b" v-for='item in 4'>
                    <div class="left">
                        <div class="f-s user-info">
                            <img :src="require('@ast/imgs/1.png')" alt="">
                            <span class="nick-name">昵称昵称昵称昵称</span>
                            <span class="auth">认证</span>
                        </div>
                        <h1>
                            <span>交易 80</span>
                            |
                            <span>好评 98%</span>
                        </h1>
                        <h1>好评数 66</h1>
                        <h2>
                            限额：10-500 UDS
                        </h2>
                        <h3>
                            礼品卡类型
                        </h3>
                        <h4>
                            <span>不需要收据</span>
                            <span>电子码</span>
                        </h4>
                    </div>
                    <div class="right">
                        <h1>折扣<span>0.930</span></h1>
                        <h2>49371.11 USD</h2>
                        <el-button type='primary'>购买 BTC</el-button>
                    </div>
                </li>
            </ul>
            <div style="padding: 15px;text-align:center;">
                <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="1000"
                    :pager-count='5'>
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
    import AdLeft from '@c/AdLeft'
    import PayType from '@c/PayType'
    export default {
        components: {
            AdLeft,
            PayType
        },
        data() {
            return {
                activeName : 'first',
                table : [
					{
						id :1,
						one : 'BTC/USDT',
						two : '23528.71',
						three : '+0.83%',
						four : '24149.52',
						five :'20360.64',
						six  : '2265.432512'
					},{
						id :1,
						one : 'BTC/USDT',
						two : '23528.71',
						three : '+0.83%',
						four : '24149.52',
						five :'20360.64',
						six  : '2265.432512'
					},{
						id :1,
						one : 'BTC/USDT',
						two : '23528.71',
						three : '+0.83%',
						four : '24149.52',
						five :'20360.64',
						six  : '2265.432512'
					},{
						id :1,
						one : 'BTC/USDT',
						two : '23528.71',
						three : '+0.83%',
						four : '24149.52',
						five :'20360.64',
						six  : '2265.432512'
					},{
						id :1,
						one : 'BTC/USDT',
						two : '23528.71',
						three : '+0.83%',
						four : '24149.52',
						five :'20360.64',
						six  : '2265.432512'
					},{
						id :1,
						one : 'BTC/USDT',
						two : '23528.71',
						three : '+0.83%',
						four : '24149.52',
						five :'20360.64',
						six  : '2265.432512'
					}
				],
            };
        },
        methods :{
            tabClick () {

            }
        }
    }
</script>
<style lang="less" scoped>
    @import url('../../assets/css/_b.less');
    //小屏
    @media screen and (max-width : 670px) {
        .main-container{
            // background: #fff;
            .main-tab {
                li {
                    width: 50%;
                    color: rgb(120,136,158);
                    padding: 15px 0;
                    text-align: center;
                    font-size: 18px;
                    font-weight: bold;
                }
                .active {
                    color: @mainColor;
                }
                
            }
            .sale-or-buy {
                padding: 10px;
                background: #fff;
                .el-button {
                    width: 120px;
                }
            }
            .list {
                li {
                    padding: 10px;
                    background: #fff;
                    border-bottom: 1px solid @borderColor;
                }
                .user-info {
                    margin-bottom: 6px;
                    img {
                        width: 20px;
                        height: 20px;
                        border-radius: 50%;
                        margin-right: 10px;
                    }
                    .nick-name {
                        display: inline-block;
                        max-width: 80px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }
                    .auth {
                        background: @mainColor;
                        color: #fff;
                        padding: 2px 4px;
                        border-radius: 3px;
                        font-size: 0.6rem;
                    }
                }
                .left {
                    h1 {
                        color: rgb(120,136,158);
                        // font-size: 0.6rem;
                        margin-bottom: 4px;
                    }
                    h2 {
                        margin-top: 8px;
                        font-size: 14px;
                        color: rgb(85, 86, 108);
                        margin-bottom: 8px;
                        font-family: "PingFang SC", sans-serif;
                        text-indent: 0px;
                    }
                    h3 {
                        margin-top: 6px;
                        font-size: 13px;
                        color: rgb(85, 86, 108);
                        margin-bottom: 6px;
                        font-family: "PingFang SC", sans-serif;
                        text-indent: 0px;
                    }
                    h4 {
                        padding-top: 8px;
                        color: @mainColor;
                        span {
                            margin-right: 8px;
                            padding: 4px 6px;
                            border: 1px solid @borderColor;
                            border-radius: 4px;
                        }
                    }
                }
                .right {
                    h1 {
                        margin-bottom: 10px;
                        font-size: 14px;
                        span {
                            font-size: 18px;
                            font-weight: bold;
                        }
                    }
                    h2 {
                        font-size: 15px;
                        color: rgb(120,136,158);
                        margin-bottom: 30px;
                    }
                }
            }
            header {
                padding-top: 10px;
                .f-s();
            }
        }
        .type-select{
            li {
                cursor: pointer;
                padding: 15px 10px;
                font-size: 14px;
            }
            .active {
                color: @mainColor;
            }
        }
    }
    //大屏
    @media screen and (min-width : 670px) {
        .main-container {
            min-width: 1200px;
            margin: 25px auto;
            display: flex;
            justify-content: center;
        }
        .main {
            width: 1140px;
            background: #fff;
            header {
                padding : 15px 15px 0 15px;
                border-bottom: 1px solid @borderColor;
                .f-s();
                .el-select {
                    margin-right: 15px;
                }
            }
        }
    }
</style>